<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>todolist主页</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/static/H/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/H/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/H/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/static/H/css/animate.css" rel="stylesheet">
    <link href="/static/H/css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInUp">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>任务列表</h5>
                    <div class="ibox-tools">
                        <a data-toggle="modal" href="#modal-form" class="btn btn-primary btn-xs">添加新任务</a>

                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row m-b-sm m-t-sm">
                        <div class="col-md-1">
                            <button type="button" id="loading-example-btn" onclick="location.reload()" class="btn btn-white btn-sm"><i class="fa fa-refresh"></i> 刷新</button>
                        </div>
                        <div class="col-md-11">
                            <div class="input-group">
                                <input type="text" placeholder="请输入项目名称" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
                            </div>
                        </div>
                    </div>

                    <!--任务列表框-->

                    <div class="clients-list">
                        <ul class="nav nav-tabs">
                            <span class="pull-right small text-muted">事件总数</span><span id="zongshu"></span>
                            <li class="active"><a data-toggle="tab" href="#tab-1"><i class="fa fa-user"></i>所有事件</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-2"><i class="fa fa-briefcase"></i>已完成</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-3"><i class="fa fa-briefcase"></i>进行中</a></li>
                        </ul>

                        <div class="tab-content">

                            <!--所有事件列表-->

                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <table class="table table-hover" id="all">
                                        <tbody>
                                        <!--从数据库中提取数据循环遍历输出事件列表-->
                                        {foreach $data as $key=>$vo}
                                        <tr>
                                            <td class="project-status">
                                                <!--如果状态值status为1的话则任务状态为以完成状态,否则为进行中状态-->
                                                {if ($vo['status'] == 1)}
                                                <span class="label label-primary">已完成</span>
                                                {else /}
                                                {if ($vo['newstatus'])}
                                                <span class="label label-danger">已延期</span>
                                                {else/}
                                                <span class="label label-primary">进行中</span>
                                                {/if}
                                                {/if}
                                            </td>
                                            <td class="project-title">
                                                <a href="">{$vo['title']}</a>
                                                <br/>
                                                {$vo['content']}
                                                <br>
                                                <small>创建时间:{$vo['create_time']}</small>
                                                <br>
                                                <small>结束时间:{$vo['deadline']}</small>
                                            </td>
                                            <td class="project-completion">
                                                <small>任务耗时： {$vo.progress}%</small>
                                                <div class="progress progress-striped active">
                                                    <div style="width: {$vo.progress}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-danger">
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="project-actions">
                                                <a href="{:url('Events/detal',['id' => $vo['id']])}" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                                <a href="{:url('Events/modify',['id' => $vo['id']])}" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 编辑 </a>
                                                <a data-id="{$vo.id}" class="btn btn-danger  btn-sm del"><i class="fa fa-pencil"></i> 删除 </a>
                                            </td>
                                        </tr>
                                        {/foreach}
                                        </tbody>
                                    </table>
                                    <!--分页器-->
                                    {$data|raw}
                                </div>
                            </div>

                            <!--已完成事件列表-->

                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                    <table class="table table-hover" id="done">
                                        <tbody>

                                        <!--从数据库中提取数据循环遍历输出事件列表-->
                                        {foreach $done as $key=>$vo}
                                        <tr>
                                            <td class="project-status">
                                                <!--如果状态值status为1的话则任务状态为以完成状态,否则为进行中状态-->
                                                {if ($vo['status'] == 1)}
                                                <span class="label label-primary">已完成</span>
                                                {else /}
                                                {if ($vo['newstatus'])}
                                                <span class="label label-danger">已延期</span>
                                                {else/}
                                                <span class="label label-primary">进行中</span>
                                                {/if}
                                                {/if}
                                            </td>
                                            <td class="project-title">
                                                <a href="">{$vo['title']}</a>
                                                <br/>
                                                {$vo['content']}
                                                <br>
                                                <small>创建时间:{$vo['create_time']}</small>
                                                <br>
                                                <small>结束时间:{$vo['deadline']}</small>
                                            </td>
                                            <td class="project-completion">
                                                <small>任务耗时： {$vo.progress}%</small>
                                                <div class="progress progress-striped active">
                                                    <div style="width: {$vo.progress}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-danger">
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="project-actions">
                                                <a href="{:url('Events/detal',['id' => $vo['id']])}" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                                <a href="{:url('Events/modify',['id' => $vo['id']])}" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 编辑 </a>
                                                <a data-id="{$vo.id}" class="btn btn-danger  btn-sm del"><i class="fa fa-pencil"></i> 删除 </a>
                                            </td>
                                        </tr>
                                        {/foreach}
                                        </tbody>
                                    </table>
                                    <!--分页器-->
                                    {$done|raw}
                                </div>
                            </div>

                            <!--正在进行中事件列表-->

                            <div id="tab-3" class="tab-pane">
                                <div class="panel-body">
                                    <table class="table table-hover" id="doing">
                                        <tbody>

                                        <!--从数据库中提取数据循环遍历输出事件列表-->
                                        {foreach $doing as $key=>$vo}
                                        <tr>
                                            <td class="project-status">
                                                <!--如果状态值status为1的话则任务状态为以完成状态,否则为进行中状态-->
                                                {if ($vo['status'] == 1)}
                                                <span class="label label-primary">已完成</span>
                                                {else /}
                                                {if ($vo['newstatus'])}
                                                <span class="label label-danger">已延期</span>
                                                {else/}
                                                <span class="label label-primary">进行中</span>
                                                {/if}
                                                {/if}
                                            </td>
                                            <td class="project-title">
                                                <a href="">{$vo['title']}</a>
                                                <br/>
                                                {$vo['content']}
                                                <br>
                                                <small>创建时间:{$vo['create_time']}</small>
                                                <br>
                                                <small>结束时间:{$vo['deadline']}</small>
                                            </td>
                                            <td class="project-completion">
                                                <small>任务耗时： {$vo.progress}%</small>
                                                <div class="progress progress-striped active">
                                                    <div style="width: {$vo.progress}%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-danger">
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="project-actions">
                                                <a href="{:url('Events/detal',['id' => $vo['id']])}" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                                <a href="{:url('Events/modify',['id' => $vo['id']])}" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 编辑 </a>
                                                <a data-id="{$vo.id}" class="btn btn-danger  btn-sm del"><i class="fa fa-pencil"></i> 删除 </a>
                                            </td>
                                        </tr>
                                        {/foreach}
                                        </tbody>
                                    </table>
                                    <!--分页器-->
                                    {$doing|raw}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>






<!--添加任务的弹出窗口-->
<div id="modal-form" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <form role="form" id="form" method="post" action="{:url('Events/add')}">
                        <div class="form-group">
                            <label>任务标题：</label>
                            <input type="text" name="title" placeholder="请输入任务标题" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>任务详情：</label>
                            <textarea rows="5" name="content" placeholder="请输入对任务的详细描述" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label>截止日期：</label>
                            <input id="deadline" name="deadline" class="laydate-icon form-control">
                        </div>

                        <div>
                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>添加</strong></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="/static/H/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/H/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/static/H/js/jQuery.form.js"></script>
<script src="/static/H/js/plugins/layer/laydate/laydate.js"></script>
<script src="/static/H/js/plugins/layer/3.1/layer.js"></script>
<script src="/static/H/js/plugins/validate/1.14/jquery.validate.js"></script>

<!-- 自定义js -->

<script>
    //统计事件总数
    var num = $('#all tr').length;
    $('#zongshu').html(num);




    //日期控件
    laydate({
        elem:'#deadline',
        event:'focus',
        format:'YYYY-MM-DD hh:mm:ss',
        istime: true,
    });

    //验证表单数据
    $('#form').validate({
        //定义表单验证规则
        rules:{
            title:{
                required:true,
                minlength:2,
                maxlength:100,
            },
            deadline:{
                required: true,
                date:true,
            }
        },
        //表单验证失败的提示信息
        messages:{
            title:{
                required:"请输入任务标题",
                minlength: "任务标题的长度不能小于2个字符",
                maxlength:"任务标题长度不能大于100个字符"
            },
            deadline:{
                    required: "请选择正确日期",
                    date: "请选择截止日期"
                    }

        },
        //修改提交操作,默认提交是submit被点击
        //使用ajax提交
        submitHandler:function (form) {
            $(form).ajaxSubmit(function (e) {
                //ajax提交后的返回值
                if (!e.code){
                    // layer.alert(e.info)
                    console.log(e)
                } else{
                    window.location.reload()
                }

            })
        }
    });

    //删除操作
    //点击的时候获取删除按键的data-id属性值,使用ajax发送至服务端
    $('.del').click(function () {
        var id = $(this).attr('data-id');
        layer.confirm('确定删除?',{btn:['确定','取消']},function () {
            layer.closeAll();
            $.post('{:url("Events/del")}',{id:id},function (e) {
                if(e.code){
                    $(this).parent().parent().detach();
                    console.log(1)   //没有起作用
                }else{
                    layer.alert(e.info);
                }

            });
        });
        return false;
    });


</script>




</body>
</html>